<template>
<view style="background-color:  #f8df72;">
<view>
	<view>
		<my-search  @click="navigateToPage"></my-search>
	</view>
    
	
    <!-- 轮播图 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item v-for="(img, index) in swiperImages" :key="index">
        <image :src="img" mode="widthFix" style="width:100%;"></image>
      </swiper-item>
    </swiper>

    <!-- 四个方块图片展示 -->
    <view class="image-grid" >
      <view class="image-item" v-for="(img, index) in gridImages" :key="index">
        <image :src="img" mode="aspectFill"></image>
      </view>
    </view>
      
  </view>
  <view>
</view>
	  <view >
		  <image src="/static/bigImage_buy/goSell.png" mode="aspectFill" class="bigImage" ></image>
		  <image src="/static/bigImage_buy/goBuy.png" mode="aspectFill" class="bigImage"></image>
	  </view>
	 
  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperImages: [
        '/static/Image_bag/image1.png',
        '/static/Image_bag/image2.png',
        '/static/Image_bag/image3.png',
        '/static/Image_bag/image4.png'
      ],
      gridImages: [
        '/static/Image_bag/image5.png',
        '/static/Image_bag/image6.png',
        '/static/Image_bag/image7.png',
        '/static/Image_bag/image8.png'
      ]
    };
  },


}

  
</script>


<style lang="scss" scoped>
.image-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 20px;
}

.image-item {
  width: 48%;
  height: 100px;
  margin-bottom: 10px;
}
.bigImage {
	height: 580rpx;
	width: 50%;
	margin-bottom: 5px;
	border-radius: 18px;
}

image {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

</style>